<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>partial update</title>
		<meta
			name="description"
			content="updating every 10th row for 1,000 rows (3 warmup runs). 16x CPU slowdown."
		/>
		<style>
			.preloadicon {
				display: none;
			}
			.glyphicon-remove:before {
				content: '⨯';
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script type="module">
			import {
				measureName,
				measureMemory,
				afterFrame,
				afterFrameAsync,
				getRowLinkSel,
				testElement,
				testElementTextContains
			} from './util.js';
			import * as framework from 'framework';
			import { render } from '../src/keyed-children/index.js';

			const { run: mount, update } = render(
				framework,
				document.getElementById('main')
			);

			function repeat(pattern, repeats) {
				let result = '';
				for (let i = 0; i < repeats; i++) {
					result += pattern;
				}

				return result;
			}

			async function init() {
				mount();

				await afterFrameAsync();
				testElement(getRowLinkSel(1000));

				for (let i = 0; i < 3; i++) {
					update();

					await afterFrameAsync();
					testElementTextContains(getRowLinkSel(991), repeat(' !!!', i + 1));
				}
			}

			async function run() {
				performance.mark('start');
				update();

				await afterFrameAsync();
				testElementTextContains(getRowLinkSel(991), repeat(' !!!', 3 + 1));
				performance.mark('stop');
				performance.measure(measureName, 'start', 'stop');

				measureMemory();
			}

			init().then(run);
		</script>
	</body>
</html>
